<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta  http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>动态组件与v-once指令</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='root'>
			
			<!-- 动态组件：type是什么就创建哪个子组件，销毁之前的组件，为了不消耗性能，在模板里添加v-once，将显示过一次的组件放入内存 -->
			<component :is = 'type'></component>
			
			
			<!-- 等同于 -->
<!-- 			<child-one v-if="type==='child-one'"></child-one>
			<child-two v-if="type==='child-two'"></child-two> -->
			<button type="button" @click = "handletoChange">change</button>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('child-one', {
			
			template: `<div v-once>child-one</div>`
		})
		Vue.component('child-two', {
			
			template: `<div v-once>child-two</div>`
		})
		var vm = new Vue({
			el: "#root",
			data: {
				type: 'child-one'
			},
			methods: {
				handletoChange: function () {
					this.type = this.type === 'child-one' ? 'child-two' : 'child-one';
				}
			}
		})
	</script>
</html>